<template>
  <div>
    <div>
      <el-form :inline="true">
        <el-form-item label="昵称">
          <el-input v-model="filter.nickName" placeholder="输入昵称"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button @click="search" type="primary">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="records">
      <el-table-column type="index" label="序号" width="60px" />
      <el-table-column label="头像">
        <template #default="scope">
          <img class="rounded-full w-14 h-14" :src="scope.row.headImg" alt="" />
        </template>
      </el-table-column>
      <el-table-column prop="nickName" label="昵称" />
      <el-table-column prop="openId" label="openId" />
      <el-table-column prop="albumAmount" label="可创建相册" />
      <el-table-column prop="albumCreatedAmount" label="已创建相册">
      </el-table-column>
      <el-table-column prop="albumJoinedAmount" label="已加入相册">
      </el-table-column>
      <el-table-column prop="registerTime" label="注册时间"> </el-table-column>
      <el-table-column prop="lastLoginTime" label="最近登录"> </el-table-column>

      <el-table-column fixed="right" label="操作">
        <template #default="scope">
          <el-button @click="editItem(scope.row)" type="primary"
            >修改</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="flex justify-end mt-2">
      <el-pagination
        background
        layout="prev, pager, next"
        v-model:current-page="filter.pageNum"
        :default-page-size="filter.pageSize"
        :total="total"
        @prev-click="getList"
        @next-click="getList"
        @current-change="getList"
      />
    </div>
    <el-dialog v-model="editDialog" title="编辑" @close="handleClose">
      <el-form class="form-box" v-if="editItemForm">
        <el-form-item label="可创建相册个数">
          <el-input-number v-model="editItemForm.albumAmount"></el-input-number>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveUpdate">保存</el-button>
          <el-button @click="editDialog = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { getUserList, updateMaxAlbum } from "@/apis/user";
import { ElMessage } from "element-plus";
const total = ref(1);

const records = ref<UserItem[]>([]);
const filter = reactive<UserFilter>({
  pageNum: 1,
  pageSize: 10,
});
const getList = async () => {
  const res = await getUserList(filter);
  total.value = res.total;

  records.value = res.list;
};
const search = () => {
  filter.pageNum = 1;
  getList();
};
onMounted(() => {
  getList();
});
const editDialog = ref(false);
const editItemId = ref<number>();
const editItemForm = reactive({
  albumAmount: 1,
});
const handleClose = () => {
  editItemId.value = undefined;
  editItemForm.albumAmount = 1;
};
const editItem = (row: UserItem) => {
  editItemForm.albumAmount = row.albumAmount;
  editItemId.value = row.userId;
  editDialog.value = true;
};
const saveUpdate = async () => {
  if (editItemId.value) {
    await updateMaxAlbum(editItemId.value, editItemForm.albumAmount);
    ElMessage.success("保存成功");
    editDialog.value = false;
    getList();
  }
};
</script>

<style scoped></style>
